<template>
	<view class="main">
		<view class="backcolor">
			<u-navbar :is-back="false" title="我的" :background="background" :border-bottom="false" title-color="#fff"
				title-size="35rpx" title-bold="true">
				<view class="content">
					<view class="img">
						<image src="../../../static/images/user_bg.png" mode=""></image>
					</view>
				</view>
				<view class="right" slot="right">
					<image @click="router('../../invitation/invitations/invitation')"
						src="../../../static/images/share.png" mode=""></image>
					<image @click="router('../set_user/set_user')" src="../../../static/images/set.png" mode=""></image>
				</view>
			</u-navbar>

			<view class="head">
				<view class="head_l">
					<image :src="userinfo.head" mode=""></image>
				</view>
				<view class="head_r">
					<view class="name" v-if="userinfo.is_vip==1">
						<text>{{userinfo.nick}}</text>
						<view class="count">
							<view class="coun_name">
								<image src="../../../static/images/vip.png" mode=""></image>
							</view>
							<view class="coun_num" v-if="userinfo.is_vip==1">超级会员</view>
							<!-- <view class="coun_num" v-if="userinfo.is_vip==0">请充值</view> -->
						</view>
					</view>
					<view class="phone">
						{{userinfo.phone}}
					</view>
					<view class="address" @click="address">
						合约地址
					</view>
				</view>
			</view>
		</view>

		<view class="features">
			<view class="mid">
				<image src="../../../static/images/dingdan.png" @click="router('../mine_order/mine_order')"
					mode="aspectFit"></image>
				<text>我的订单</text>
			</view>
			<view class="mid" @click="give">
				<image src="../../../static/images/zz.png" mode="aspectFit"></image>
				<text>我的转赠</text>
			</view>
			<view class="mid" @click="router()">
				<image src="../../../static/images/xiaoxi.png" @click="router('../news/news')" mode="aspectFit"></image>
				<text>消息推送</text>
			</view>
			<view class="mid" @click="seconds">
				<image src="../../../static/images/jj.png" mode="aspectFit"></image>
				<text>市场</text>
			</view>
		</view>
		<view class="userbanner" @click="router('../../invitation/invitations/invitation')">
			<image src="../../../static/images/userback.png" mode="aspectFit"></image>
		</view>
		<view class="collection">
			藏品博物馆（{{goodslist.length}}）
		</view>
		<view v-if="goodslist.length>0" v-for="(goods,index) in goodslist" :key="index" class="seconds"
			@click="router('../goods_details/goods_details','',goods.id)">
			<view class="translate">
				<view class="tr_img">
					<image :src="goods.img" mode=""></image>
				</view>
				<view class="tt_tit">
					{{goods.title}}
				</view>

				<view class="sec_bot">
					<view class="market">
						<image :src="goods.issuer_img" mode="aspectFit"></image>
						<text>{{goods.issuer}}</text>
					</view>

				</view>
			</view>
		</view>
		<view v-if="goodslist.length<=0" class="kong">
			<image src="../../../static/images/kong.png" mode=""></image>
		</view>
		<view class="certification" v-if="userinfo.checking_realname==0">
			<view>实名认证后才可以购买数字藏品</view>
			<view class="btn" @click="router('../real_name/real_name')">去认证</view>
		</view>
		<!-- 弹出层 -->

		<view class="zhezhao" v-if="show">
			<view class="pupu">
				<image @click="close" src="../../../static/images/cha.png" mode=""></image>
				<view class="pu_tit">合约地址</view>
				<text class="cont">{{userinfo.address}}</text>
				<view class="copy"@click="copyed(userinfo.address)">
					复制
				</view>
			</view>
		</view>


		<view class="sec" v-if="flag">
			转赠开发中，敬请期待！
		</view>
		<view class="sec" v-if="second">
			市场暂未开放
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				show: false,
				background: {
					backgroundColor: '#111111',
				},
				flag: false,
				second: false,
				userinfo: {},
				goodslist: [],
			}
		},
		onLoad() {

		},
		onShow() {
			
			if (uni.getStorageSync('token') == '') {
				this.userinfo={}
				uni.showToast({
					title: '请先登录',
					icon: "none",
					mask: true,
					duration: 2000
				})
				setTimeout(function() {
					uni.navigateTo({
						url: '../../logins/login/login'
					})
				}, 2000)
				return false
			}
			this.getuserinfo()
			this.getgoods()
		},
		methods: {
			 
			copyed(value){
				uni.setClipboardData({
				  data:value,//要被复制的内容
				  success:()=>{//复制成功的回调函数
				    uni.showToast({//提示
				      title:'复制成功'
				    })
					this.show=false
				  }
				});
			},
			getuserinfo() {
				global.$http.request({
					url: '/api/mine/index',
					data: {
						token: uni.getStorageSync('token'),
					}
				}).then(res => {
					if (res.data.code == 0) {
						console.log(res.data.data);
						this.userinfo = res.data.data
						this.userinfo.phone = res.data.data.phone.substr(0, 3) + "****" + res.data.data.phone
							.substr(7);
					}
				})
			},
			getgoods() {
				global.$http.request({
					url: '/api/mine/myGoods',
					data: {
						limit: 5,
						page: 1,
						token: uni.getStorageSync('token'),
					}
				}).then(res => {
					if (res.data.code == 0) {
						console.log('博物馆', res.data.data.list);
						this.goodslist = res.data.data.list

					}
				})
			},
			router(path, type, id) {
				console.log(id);
				uni.navigateTo({
					url: path,
					success: function(res) {
						res.eventChannel.emit('details', {
							data: {
								type: type,
								id: id,
							}
						})
					}
				})
			},
			address() {
				this.show = true
			},
			seconds() {
				var that = this
				that.second = true
				setTimeout(function() {
					that.second = false
				}, 2000);
			},
			give(){
				var that = this
				that.flag = true
				setTimeout(function() {
					that.flag = false
				}, 2000);
			},
			close() {
				this.show = false
			},

		}
	}
</script>

<style lang="scss">
	page {
		font-family: PingFang SC;
		background-color: #000;

		.main {
			width: 750rpx;

			.backcolor {
				background-color: #181818;

				.content {
					.img {
						position: absolute;
						top: 0;
						width: 750rpx;
						height: 208rpx;
						z-index: -1;

						image {
							width: 750rpx;
							height: 208rpx;
						}

					}
				}

				.right {
					display: flex;

					image {
						margin-right: 32rpx;
						width: 48rpx;
						height: 48rpx;
					}
				}

				.head {
					display: flex;
					// align-items: center;
					background: #181818;
					opacity: 1;
					padding: 40rpx 32rpx;

					.head_l {
						width: 120rpx;
						height: 120rpx;
						border-radius: 100%;
						overflow: hidden;

						image {
							width: 120rpx;
							height: 120rpx;
						}
					}

					.head_r {
						padding-left: 24rpx;

						.name {
							display: flex;
							align-items: center;
							font-size: 32rpx;
							font-weight: 400;
							color: #FFFFFF;

							.count {
								padding-left: 16rpx;
								display: flex;

								// align-items: center;
								.coun_name {
									padding: 4rpx 12rpx;
									background: #F4BF57 !important;
									border-radius: 8rpx 0rpx 0rpx 8rpx;
									opacity: 1;
									font-size: 24rpx;
									line-height: 23rpx;
									font-weight: 400;
									color: #333333 !important;

									image {
										width: 32rpx;
										height: 32rpx;
									}
								}

								.coun_num {
									padding: 2rpx 8rpx;
									font-size: 24rpx;
									font-weight: 400;
									color: #DBBE7E;
									background: #4C484B;
									border-radius: 0rpx 8rpx 8rpx 0rpx;
									opacity: 1;

								}
							}
						}

						.phone {
							padding: 18rpx 0 12rpx 0;
							font-size: 28rpx;
							font-weight: 400;
							color: #FFFFFF;
						}

						.address {
							width: 125rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: #FFFFFF;
							opacity: 0.5;
							padding: 6rpx 12rpx;
							border-radius: 24rpx 24rpx 24rpx 24rpx;
							border: 2rpx solid #707070;
						}
					}
				}
			}

			.features {
				background-color: #181818;
				display: flex;
				justify-content: space-around;
				align-items: center;
				width: 686rpx;
				margin: 24rpx auto;
				background: #181818;
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				opacity: 1;


				.mid {
					padding: 34rpx 0 32rpx 0;
					display: flex;
					flex-direction: column;
					align-items: center;
					font-size: 24rpx;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 36rpx;

					image {
						width: 48rpx;
						height: 48rpx;
						;
					}

					text {
						padding-top: 16rpx;
					}
				}
			}
			.userbanner{
				margin: 24rpx 32rpx 32rpx 32rpx;
				image{
					width: 686rpx;
					height: 248rpx;
					border-radius: 32rpx;
				}
			}
			.collection {
				padding: 40rpx 32rpx 32rpx 32rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 36rpx;

			}

			.seconds {
				margin: 24rpx 32rpx;
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				opacity: 1;
				border: 2rpx solid #34302F;
				background: #353130;
				position: relative;

				.endtime {
					position: absolute;
					top: 0;
					left: 0;
					padding: 16rpx;
					background: #000000;
					border-radius: 32rpx 0rpx 32rpx 0rpx;
					opacity: 0.5;
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #2DEAE6;

					text {
						padding-left: 12rpx;
					}
				}

				.translate {
					border-radius: 32rpx 32rpx 32rpx 32rpx;

					.tr_img {
						width: 686rpx;
						margin: 0 auto;

						image {
							border-radius: 32rpx 32rpx 32rpx 32rpx;
							width: 686rpx;
							height: 686rpx;
						}
					}

					.tt_tit {
						font-size: 32rpx;
						font-weight: bold;
						font-family: PingFang SC-Bold, PingFang SC;
						color: #FFFFFF;
						padding: 24rpx 0 16rpx 32rpx;
					}



					.sec_bot {
						padding: 0rpx 32rpx 32rpx 32rpx;


						.market {
							display: flex;
							align-items: center;

							image {
								width: 36rpx;
								height: 36rpx;
								padding-right: 12rpx;
							}

							text {
								font-size: 24rpx;
								font-family: PingFang SC-Regular, PingFang SC;
								font-weight: 400;
								color: #FFFFFF;

							}
						}


					}

				}
			}

			.kong {
				width: 460rpx;
				margin: 0 auto;

				image {
					width: 460rpx;
					height: 400rpx;
				}
			}

			.certification {
				margin: 32rpx;
				padding: 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				background: #F3C860;
				border-radius: 16rpx;
				opacity: 1;
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;

				.btn {
					padding: 8rpx 20rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #F3C860;
					line-height: 32rpx;
					background: #333333;
					border-radius: 26rpx;
					opacity: 1;
				}
			}

			.zhezhao {
				background-color: rgba(0, 0, 0, 0.5);
				position: fixed;
				top: 0;
				width: 750rpx;
				height: 100%;
				z-index: 5;

				.pupu {
					display: flex;
					flex-direction: column;
					align-items: center;
					margin: 68% auto 0 auto;
					padding: 40rpx;
					z-index: 10;
					// overflow: hidden;
					width: 600rpx;
					height: 608rpx;
					background: #333333;
					border-radius: 32rpx;
					opacity: 1;
					position: relative;

					image {
						width: 48rpx;
						height: 48rpx;
						position: absolute;
						top: 10rpx;
						right: 10rpx;
					}

					.pu_tit {
						font-size: 32rpx;
						font-weight: bold;
						color: #FFFFFF;

					}

					.cont {
						width: 600rpx;
						word-wrap: break-word;
						text-align: center;
						padding: 124rpx 40rpx;
						font-size: 32rpx;
						font-weight: 400;
						color: #FFFFFF;
					}

					.copy {
						text-align: center;
						padding: 24rpx 128rpx;
						background: #F3C860;
						border-radius: 46rpx;
						opacity: 1;
						font-size: 32rpx;
						font-weight: bold;
						color: #333333;
					}
				}
			}

			.sec {
				position: fixed;
				top: 780rpx;
				left: 170rpx;
				width: 420rpx;
				text-align: center;
				padding: 16rpx 0rpx;
				background: #F3C860;
				border-radius: 16rpx;
				opacity: 1;
			}
		}

	}
</style>
